﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title></title>
    <link rel="stylesheet" href="/css/scenario4_ForegroundGeofence.css">
    <script src="/js/scenario4_ForegroundGeofence.js"></script>
    <script src="/js/scenario4UIHandlers.js"></script>
    <script src="/js/geofenceitem.js"></script>
</head>

<body class="win-type-body">
    <div id="scenarioView">
        <div>
            <h2 id="sampleHeader" class="win-type-subheader">Description:</h2>
            <div id="scenarioDescription">
                <p>Geofence API allows applications to add, list, and remove geofences that will be monitored by the system.</p>
            </div>
        </div>
        <div id="scenarioContent" class="scenario4">
            <p><span class="required-mark"></span>Indicates Required Fields</p>
            <button class="action win-button" id="createGeofenceButton">Create Geofence</button>
            <br>
            <label class="required">
                Name
                <input type="text" id="name" class="win-textbox">
                <span id="charCount">0 characters</span>
            </label>
            <br>
            <label class="required">
                Latitude
                <input type="number" min="-90" max="90" maxlength="12" id="latitude" class="win-textbox"> -90 to 90 degrees
            </label>
            <br>
            <label class="required">
                Longitude
                <input type="number" min="-180" max="180" maxlength="12" id="longitude" class="win-textbox"> -180 to 180 degrees
            </label>
            <br>
            <label class="required">
                Radius
                <input type="number" min=".1" max="10018754.3" maxlength="12" id="radius" class="win-textbox"> .1 to 10018754.3 meters
            </label>
            <br>
            <br>
            <button class="action win-button" id="setPositionToHereButton">Use current position</button>
            <br>
            <div>
                <label>
                    Dwell Time
                    <input type="text" id="dwellTime" class="win-textbox">
                </label>
                <div>
                    <ul>
                        <li>
                            Format: d:hh:mm:ss
                            <ul>
                                <li>Example 1: 7:22:45:55 for 7 days, 22 hours, 45 minutes, 55 seconds</li>
                                <li>Example 2: 1:35 for 1 minute, 35 seconds</li>
                                <li>Example 3: 30 for 30 seconds</li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <br>
            <label>
                Duration
                <input type="text" id="duration" class="win-textbox"> Uses the same format as Dwell Time
            </label>
            <br>
            <label class="checkboxLabel">
                Single Use?
                <input type="checkbox" id="geofenceSingleUse" class="win-checkbox">
            </label>
            <br>
            <div>
                <br>
                <label>
                    Start Time
                    <input type="text" maxlength="20" id="startTime" class="win-textbox">
                    <button class="action win-button" id="setStartTimeToNowButton">Now</button>
                </label>
                <br>
                <div>
                    <ul>
                        <li>
                            Format: mm/dd/yyyy hh:mm:ss
                            <ul>
                                <li>Example: 2/10/2014 22:45:07 for February 10, 2014 at 10:45:07 PM</li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            <br>
            <div>
                <h3 class="win-type-title">Registered Geofences</h3>
                <div id="RegisteredGeofencesItemTemplate" data-win-control="WinJS.Binding.Template">
                    <div class="GeofenceListViewItemStyle">
                        <span data-win-bind="innerText: id"></span> (<span data-win-bind="innerText: latitude"></span>, <span data-win-bind="innerText: longitude"></span>, <span data-win-bind="innerText: radius"></span>)
                    </div>
                </div>
                <div id="RegisteredGeofenceListView" class="win-selectionstylefilled" data-win-control="WinJS.UI.ListView" data-win-options="{
                             itemTemplate: &apos;select(#RegisteredGeofencesItemTemplate)&apos;,
                             selectionMode: &apos;multi&apos;,
                             tapBehavior: &apos;toggleSelect&apos;,
                             layout: { type: WinJS.UI.ListLayout }
                         }"></div>
                <button class="action win-button" id="removeGeofenceItem">Remove Selected Geofence</button>
                <br>
                <br>

                <h3 class="win-type-title">Events</h3>
                <div id="GeofenceEventsItemTemplate" data-win-control="WinJS.Binding.Template">
                    <div class="GeofenceListViewItemStyle" data-win-bind="innerText: this"></div>
                </div>
                <div id="GeofenceEventsListView" class="win-selectionstylefilled" data-win-control="WinJS.UI.ListView" data-win-options="{
                             itemTemplate: &apos;select(#RegisteredGeofencesItemTemplate)&apos;,
                             selectionMode: &apos;none&apos;,
                             layout: { type: WinJS.UI.ListLayout }
                         }"></div>
            </div>

        </div>
    </div>
</body>

</html>